<template>
  <div class="admin-dashboard">
    <!-- 用户信息和侧边菜单栏 -->
    <el-container>
      <el-aside width="200px" style="background-color: #ffffff;">
        <!-- 标题行 -->
        <div class="system-title">
          停车缴费管理系统
        </div>
        <!-- 账户管理功能，用户可以查看和修改自己的基本信息（如用户名、密码、联系方式等），并将更新后的信息提交至后台，此操作涉及数据的安全性验证，如密码加密和用户身份验证，以确保信息的安全和隐私保护；
        出入场管理功能，用户可以实现车辆的进出控制、记录和管理。
        缴费服务功能，用户可以查询停车费用并进行支付。系统会展示停车时间、费用详情以及支付方式（在线支付、扫码支付等），支付成功后，系统会在数据库中记录支付状态和相关交易信息。
        预定车位功能，用户可以查看当前停车场的车位空闲情况，并根据自己的需求预定车位，同一用户不能重复预定多个车位。 -->

        <!-- 菜单 -->
        <el-menu :router="true" :default-active="activeMenu" @select="handleSelect" style="border-right: none;">
          <el-menu-item v-if="role === '管理员'" index="/admin/ParkingManagement">
            <svg xmlns="http://www.w3.org/2000/svg" style="margin-right: 8px;" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M5 21V10.85L2.2 13L1 11.4L12 3l11 8.4l-1.2 1.6l-2.8-2.15V21h-2V11H7v10zm3-1v-2h8v2zm0-3v-2h8v2zm0-3v-2h8v2zm-.575-5h9.15L12 5.525z"/></svg>
            停车场管理
          </el-menu-item>
          <el-menu-item v-if="role === '管理员'" index="/admin/SpaceManagement">
            <svg xmlns="http://www.w3.org/2000/svg" style="margin-right: 8px;" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2c5.523 0 10 4.477 10 10a10 10 0 0 1-20 0l.004-.28C2.152 6.327 6.57 2 12 2m1.334 5H10a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1l.117-.007A1 1 0 0 0 11 16v-3h2.334C14.85 13 16 11.62 16 10s-1.15-3-2.666-3m0 2c.323 0 .666.411.666 1s-.343 1-.666 1H11V9z"/></svg>
            车位管理
          </el-menu-item>
          <el-menu-item v-if="role === '管理员'" index="/admin/FeeScheduleManagement">
            <svg xmlns="http://www.w3.org/2000/svg" style="margin-right: 8px;" width="1em" height="1em" viewBox="0 0 16 16"><path fill="currentColor" d="M12.32 8a3 3 0 0 0-2-.7H5.63A1.59 1.59 0 0 1 4 5.69a2 2 0 0 1 0-.25a1.59 1.59 0 0 1 1.63-1.33h4.62a1.59 1.59 0 0 1 1.57 1.33h1.5a3.08 3.08 0 0 0-3.07-2.83H8.67V.31H7.42v2.3H5.63a3.08 3.08 0 0 0-3.07 2.83a2 2 0 0 0 0 .25a3.07 3.07 0 0 0 3.07 3.07h4.74A1.59 1.59 0 0 1 12 10.35a2 2 0 0 1 0 .34a1.59 1.59 0 0 1-1.55 1.24h-4.7a1.59 1.59 0 0 1-1.55-1.24H2.69a3.08 3.08 0 0 0 3.06 2.73h1.67v2.27h1.25v-2.27h1.7a3.08 3.08 0 0 0 3.06-2.73v-.34A3.06 3.06 0 0 0 12.32 8"/></svg>
            收费策略
          </el-menu-item>
          <el-menu-item v-if="role === '管理员'" index="/admin/UserManagement">
            <svg xmlns="http://www.w3.org/2000/svg" style="margin-right: 8px;" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 4.75a2.25 2.25 0 1 0 0 4.5a2.25 2.25 0 0 0 0-4.5M8.25 7a3.75 3.75 0 1 1 7.5 0a3.75 3.75 0 0 1-7.5 0m1.064 5.819c.132.098.302.213.505.327c.513.29 1.265.59 2.18.59s1.668-.3 2.181-.59c.203-.114.373-.229.505-.327q.282.075.559.166l.96.315c.72.237 1.264.812 1.458 1.523l.397 2.864c.075.544-.21.939-.606 1.033c-1.047.25-2.812.53-5.453.53s-4.407-.28-5.454-.53c-.395-.094-.68-.489-.606-1.033l.397-2.864A2.23 2.23 0 0 1 7.796 13.3l.96-.315q.276-.09.558-.166m.71-1.355l-.291-.287l-.402.092q-.526.12-1.044.291l-.96.315a3.72 3.72 0 0 0-2.454 2.616l-.01.04l-.408 2.95c-.161 1.164.462 2.393 1.744 2.698c1.17.279 3.052.571 5.8.571c2.749 0 4.631-.292 5.801-.57c1.282-.306 1.906-1.535 1.745-2.698l-.409-2.95l-.01-.04a3.72 3.72 0 0 0-2.455-2.617l-.959-.315q-.517-.17-1.044-.29l-.402-.093l-.29.286l-.001.001a2 2 0 0 1-.12.101a3 3 0 0 1-.41.274a2.96 2.96 0 0 1-1.445.397a2.96 2.96 0 0 1-1.445-.397a3.2 3.2 0 0 1-.53-.375"/></svg>
            用户管理
          </el-menu-item>
          <el-menu-item v-if="role === '管理员'" index="/admin/DataAnalysis">
            <svg xmlns="http://www.w3.org/2000/svg" style="margin-right: 8px;" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M5 3v16h16v2H3V3zm15.293 3.293l1.414 1.414L16 13.414l-3-2.999l-4.293 4.292l-1.414-1.414L13 7.586l3 2.999z"/></svg>
            数据分析
          </el-menu-item>

          <el-menu-item v-if="role === '普通用户' || role === '会员'" index="/user/AccessManagement">
            <svg xmlns="http://www.w3.org/2000/svg" style="margin-right: 8px;" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="m5 11l1.5-4.5h11L19 11m-1.5 5a1.5 1.5 0 0 1-1.5-1.5a1.5 1.5 0 0 1 1.5-1.5a1.5 1.5 0 0 1 1.5 1.5a1.5 1.5 0 0 1-1.5 1.5m-11 0A1.5 1.5 0 0 1 5 14.5A1.5 1.5 0 0 1 6.5 13A1.5 1.5 0 0 1 8 14.5A1.5 1.5 0 0 1 6.5 16M18.92 6c-.2-.58-.76-1-1.42-1h-11c-.66 0-1.22.42-1.42 1L3 12v8a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1v-1h12v1a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1v-8z"/></svg>
            出入场管理
          </el-menu-item>
          <el-menu-item v-if="role === '普通用户' || role === '会员'" index="/user/PaymentManagement">
            <svg xmlns="http://www.w3.org/2000/svg" style="margin-right: 8px;" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M15.999 8.5h2c0-2.837-2.755-4.131-5-4.429V2h-2v2.071c-2.245.298-5 1.592-5 4.429c0 2.706 2.666 4.113 5 4.43v4.97c-1.448-.251-3-1.024-3-2.4h-2c0 2.589 2.425 4.119 5 4.436V22h2v-2.07c2.245-.298 5-1.593 5-4.43s-2.755-4.131-5-4.429V6.1c1.33.239 3 .941 3 2.4m-8 0c0-1.459 1.67-2.161 3-2.4v4.799c-1.371-.253-3-1.002-3-2.399m8 7c0 1.459-1.67 2.161-3 2.4v-4.8c1.33.239 3 .941 3 2.4"/></svg>
            缴费服务
          </el-menu-item>
          <el-menu-item v-if="role === '普通用户' || role === '会员'" index="/user/ReservationManagement">
            <svg xmlns="http://www.w3.org/2000/svg" style="margin-right: 8px;" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 14a1 1 0 1 0-1-1a1 1 0 0 0 1 1m5 0a1 1 0 1 0-1-1a1 1 0 0 0 1 1m-5 4a1 1 0 1 0-1-1a1 1 0 0 0 1 1m5 0a1 1 0 1 0-1-1a1 1 0 0 0 1 1M7 14a1 1 0 1 0-1-1a1 1 0 0 0 1 1M19 4h-1V3a1 1 0 0 0-2 0v1H8V3a1 1 0 0 0-2 0v1H5a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3m1 15a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-9h16Zm0-11H4V7a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1ZM7 18a1 1 0 1 0-1-1a1 1 0 0 0 1 1"/></svg>
            预定车位
          </el-menu-item>
          <el-menu-item index="/common/AccountManagement">
            <svg xmlns="http://www.w3.org/2000/svg" style="margin-right: 8px;" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M5 19V5zm0 2q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v2.5h-2V5H5v14h14v-2.5h2V19q0 .825-.587 1.413T19 21zm8-4q-.825 0-1.412-.587T11 15V9q0-.825.588-1.412T13 7h7q.825 0 1.413.588T22 9v6q0 .825-.587 1.413T20 17zm7-2V9h-7v6zm-4-1.5q.625 0 1.063-.437T17.5 12t-.437-1.062T16 10.5t-1.062.438T14.5 12t.438 1.063T16 13.5"/></svg>
            账户管理
          </el-menu-item>
        </el-menu>
      </el-aside>

      <el-container>
        <div class="fixed-breadcrumb-and-user-info">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/admin/ParkingManagement' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item v-for="(item, index) in breadcrumbItems" :key="index" :to="{ path: item.path }">
                <span v-if="item.icon">
                  <svg width="1em" height="1em" viewBox="0 0 24 24">
                    <path fill="currentColor" :d="item.icon"/>
                  </svg>
                  <span style="margin-left: 4px;">{{ item.title }}</span>
                </span>
              </el-breadcrumb-item>
          </el-breadcrumb>
          <!-- 用户信息栏 -->
          <div class="user-info">
            <span style="margin-right: 15px;">欢迎, {{ role === '管理员'? `管理员 ${name}` : `用户 ${name}`}}</span>
            <el-button link @click="logout">退出</el-button>
          </div>
        </div>

        <el-main>
          <router-view v-slot="{ Component }">
            <transition name="fade" mode="out-in">
              <keep-alive>
              <component :is="Component" />
              </keep-alive>
            </transition>
          </router-view>
        </el-main>
      </el-container>
    </el-container>
    <div class="copyright">
      Copyright ©2025 SHOU-QYT-SmartPark
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute(); // 获取当前路由信息
const role = localStorage.getItem('role') || ''; 
const name = localStorage.getItem('name') || ''; 
const activeMenu = ref('/common/AccountManagement');
const breadcrumbItems = ref([]);

const handleSelect = (key) => {
  activeMenu.value = key;
  router.push(key);
};

onMounted(() => {
  if (role === '管理员') {
    activeMenu.value = '/common/AccountManagement';
  }
  // 如果当前路径不是预期的默认路径，则导航到默认路径
  if (route.path !== '/common/AccountManagement') {
    router.push('/common/AccountManagement');
  }

  updateBreadcrumb();
});

// 更新面包屑导航
const updateBreadcrumb = () => {  
  // 获取当前路由匹配的所有路由记录,排除父组件路由，并转换为面包屑项
  const paths = route.matched.map((item) => ({
    title: item.meta.title || item.name,
    path: item.path,
    icon: item.meta.icon || null, // 添加图标数据
  })).filter(item => item.path !== '/admin/AdminDashboard');

  breadcrumbItems.value = paths;
  // alert(JSON.stringify(paths, null, 2));
};

watch(route, () => {
  updateBreadcrumb();
});

// 退出登录处理函数
const logout = () => {
  localStorage.removeItem('role'); // 清除用户角色信息
  router.push('/login'); // 假设有一个登录页面路径为/login
};
</script>

<style scoped>
/* 路由切换动画 */
/* fade-transform */
.fade-leave-active,
.fade-enter-active {
transition: all 0.25s;
}

/* 可能为enter失效，拆分为 enter-from和enter-to */
.fade-enter-from {
opacity: 0;
transform: translateY(-30px);
}
.fade-enter-to {
opacity: 1;
transform: translateY(0px);
}

.fade-leave-to {
opacity: 0;
transform: translateY(30px);
}

.admin-dashboard {
  height: 100vh;
}
.el-menu-item.is-active {
  background-color: #ecf5ff; /* 当前选中菜单项背景颜色 */
  color: #409eff; /* 当前选中菜单项文字颜色 */
}
.el-menu-item:hover {
  color: #409eff; /* 鼠标悬停时菜单项文字颜色 */
}
/* 确保整个容器能正确显示 */
.el-container {
  
  height: calc(100% - 0px); /* 考虑到头部的高度 */
}
/* 固定侧边栏 */
.el-aside {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 200px;
  background-color: #ffffff; /* 更改侧边栏背景颜色 */
  overflow-y: auto; /* 如果菜单项超出可视范围，允许垂直滚动 */
}
/* 固定面包屑导航和用户信息栏 */
.fixed-breadcrumb-and-user-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  left: 210px; /* 与侧边栏宽度相同，避免被覆盖 */
  right: 0;
  background-color: #ffffff;
  z-index: 1000;
  padding: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
}
/* 主体内容区需要添加顶部内边距以避免被固定元素遮挡 */
.el-main {
  margin-top: 60px;  /*根据面包屑、系统标题以及任何其他固定元素的实际高度调整 */
  margin-left: 200px;
  padding: 20px;
  background-color: #ecf0f1; /* 主内容区背景颜色 */
}
/* 样式调整以确保系统标题与导航栏对齐 */
.system-title {
  text-align: center; 
  padding: 15px 0; 
  background-color: #409eff; 
  color: rgb(255, 255, 255); 
  font-size: 18px; 
  font-weight: bold;
}
/* 用户信息栏样式 */
.user-info {
  display: flex;
  align-items: center;
}
/* 添加版权信息样式 */
.copyright {
  z-index: 1000; /* 确保它在大多数其他内容之上 */
  position: fixed;
  bottom: 40px;
  left: 210px;
  right: 0;
  background-color: #f8f9fa;
  padding: 10px 0;
  text-align: center;
  font-size: 16px;
  color: #a8b2cb;
  background-color: transparent;
}
</style>